<template>
  <transition name="fade">
    <section class="modal" v-if="visible">
      <section class="modal-content" :style="{width: width}">
        <section class="title">
          {{ title }}
          <img class="close-icon" @click="closeModal" src="../assets/images/close-icon.png" alt="">
        </section>
        <section class="content">
          <slot/>
        </section>
        <section class="modal-footer">
          <slot name="footer"></slot>
        </section>
      </section>
    </section>
  </transition>
</template>
<script>
  export default {
    name: 'CommonModal',
    props: {
      title: String,
      visible: Boolean,
      width: {
        type: String,
        default: '8.533rem'
      }
    },
    data: () => ({
      showModal: false
    }),
    created: function () {
      this.showModal = this.visible
    },
    methods: {
      closeModal: function () {
        this.showModal = false
        this.$emit('update:visible', this.showModal)
      }
    }
  }
</script>
<style lang="less" scoped>
  .flex {
    display: flex;
    align-items: center;
  }
  .modal {
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 2;
    background: rgba(0, 0, 0, .3);
    .modal-content {
      padding: 0.533rem 0.6rem;
      border-top: 0.093rem solid #53b0fc;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 8.533rem;
      background-color: #ffffff;
      border-radius: 0.107rem;
      .title {
        margin-bottom: 0.507rem;
        .flex;
        justify-content: space-between;
        font-weight: 500;
        font-size: 0.4rem;
        color: #333333;
        img {
          width: 0.667rem;
          height: 0.667rem;
          opacity: 0.47;
        }
      }
      .content {
        font-size: 0.347rem;
        font-weight: 500;
        color: #767676;
      }
    }
    /deep/ .modal-footer {
      .flex;
      justify-content: center;
      .btn {
        .flex;
        justify-content: center;
        width: 3.147rem;
        height: 0.933rem;
        background-image: linear-gradient(80deg,
        #58adff 0%,
        #1dd5da 100%),
        linear-gradient(
          #34c6c6,
          #34c6c6);
        background-blend-mode: normal,
        normal;
        box-shadow: 0.08rem 0.053rem 0.16rem 0rem
        rgba(47, 185, 189, 0.31);
        border-radius: 0.467rem;
        font-family: SourceHanSansCN-Regular;
        font-size: 0.32rem;
        color: #ffffff;
      }
    }
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity .2s ease;
  }
  .fade-enter, .fade-leave-active {
    opacity: 0;
  }

</style>
